新しいチャート

Chart.js 2.0 では、各データセットにコントローラーの概念が導入されています。スケールと同様に、新しいコントローラーも必要に応じて作成できます。

Chart.controllers.MyType = Chart.DatasetController.extend({

});


// Now we can create a new instance of our chart, using the Chart.js API
new Chart(ctx, {
    // this is the string the constructor was registered at, ie Chart.controllers.MyType
    type: 'MyType',
    data: data,
    options: options
});

データセット コントローラー インターフェイス

データセット コントローラーは次のインターフェイスを実装する必要があります。

{
    // Create elements for each piece of data in the dataset. Store elements in an array on the dataset as dataset.metaData
    addElements: function() {},

    // Create a single element for the data at the given index and reset its state
    addElementAndReset: function(index) {},

    // Draw the representation of the dataset
    // @param ease : if specified, this number represents how far to transition elements. See the implementation of draw() in any of the provided controllers to see how this should be used
    draw: function(ease) {},

    // Remove hover styling from the given element
    removeHoverStyle: function(element) {},

    // Add hover styling to the given element
    setHoverStyle: function(element) {},

    // Update the elements in response to new data
    // @param reset : if true, put the elements into a reset state so they can animate to their final values
    update: function(reset) {}
}

次のメソッドは、必要に応じて、派生データセット コントローラーによってオーバーライドできます。

{
    // Initializes the controller
    initialize: function(chart, datasetIndex) {},

    // Ensures that the dataset represented by this controller is linked to a scale. Overridden to helpers.noop in the polar area and doughnut controllers as these
    // chart types using a single scale
    linkScales: function() {},

    // Called by the main chart controller when an update is triggered. The default implementation handles the number of data points changing and creating elements appropriately.
    buildOrUpdateElements: function() {}
}

既存のグラフ タイプの拡張

既存のコントローラ タイプの拡張や置き換えは簡単です。組み込み型のいずれかのコンストラクターを独自のものに置き換えるだけです。

組み込みコントローラーのタイプは次のとおりです。

• Chart.controllers.line
• Chart.controllers.bar
• Chart.controllers.radar
• Chart.controllers.doughnut
• Chart.controllers.polarArea
• Chart.controllers.bubble

たとえば、バブル チャートから拡張された新しいチャート タイプを派生するには、次の手順を実行します。

// Sets the default config for 'derivedBubble' to be the same as the bubble defaults.
// We look for the defaults by doing Chart.defaults[chartType]
// It looks like a bug exists when the defaults don't exist
Chart.defaults.derivedBubble = Chart.defaults.bubble;

// I think the recommend using Chart.controllers.bubble.extend({ extensions here });
var custom = Chart.controllers.bubble.extend({
    draw: function(ease) {
        // Call super method first
        Chart.controllers.bubble.prototype.draw.call(this, ease);

        // Now we can do some custom drawing for this dataset. Here we'll draw a red box around the first point in each dataset
        var meta = this.getMeta();
        var pt0 = meta.data[0];
        var radius = pt0._view.radius;

        var ctx = this.chart.chart.ctx;
        ctx.save();
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 1;
        ctx.strokeRect(pt0._view.x - radius, pt0._view.y - radius, 2 * radius, 2 * radius);
        ctx.restore();
    }
});

// Stores the controller so that the chart initialization routine can look it up with
// Chart.controllers[type]
Chart.controllers.derivedBubble = custom;

// Now we can create and use our new chart type
new Chart(ctx, {
    type: 'derivedBubble',
    data: data,
    options: options
});

バーコントローラー

バー コントローラーには、注意すべき特別なプロパティがあります。バーの幅を正しく計算するには、コントローラーはバーにマップするデータセットの数を決定する必要があります。これを行うために、バー コントローラーはプロパティをアタッチします。bar初期化中にデータセットに追加されます。交換用または更新されたバー コントローラーを作成する場合も、同じことを行う必要があります。これにより、通常の棒グラフと新しい派生棒グラフが確実にシームレスに機能します。